<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">


<ui:composition template="../template/template.xhtml">


	<ui:define name="content">
		<script>
			function ext() {

				//this = chart widget instance
				//this.cfg = options
				//this.cfg.highlighter = "false";
				//this.cfg.cursor.show = "true";
				//this.cfg.cursor.showTooltip = "true";
				//this.cfg.cursor.tooltipLocation = "sw";
				this.cfg.axes.yaxis.tickOptions.formatString = "%.2f";
				this.cfg.highlighter.tooltipContentEditor = tooltipContentEditor;
				//console.log(this.cfg);
			}
			
			function tooltipContentEditor(str, seriesIndex, pointIndex, plot) { 
				// display series_label with x and y values value 
				//console.log(plot.legend.labels);
			//	console.log(seriesIndex); 
				var toolTip = "<div>" + 
							  	plot.series[seriesIndex].label + ":" + str + 
							  "</div>"; 
				return toolTip; 
			 }
		</script>
		<f:facet name="last">
			<h:outputStylesheet name="welcome_styles.css" library="styles" />
		</f:facet>
		<h:form>
			<p:panelGrid styleClass="dataTable">
				<p:row>
					<p:column styleClass="loginForm">
						<h:panelGrid columns="2" columnClasses="left,right">
							<p:chart type="line"
								model="#{dollarRateChartBean.dollarRatesChart}"
								style="height:100%" widgetVar="chart" />
						</h:panelGrid>
					</p:column>
				</p:row>
			</p:panelGrid>
			<p:commandButton type="button" value="Reset"
				onclick="PF('chart').resetZoom()" />			
		</h:form>
	</ui:define>

</ui:composition>
</html>